<template>
  <div class="content-cont">
    <!-- <div class="top-box">
      <div class="left"></div>
      <div class="right">
        <div class="content"></div>
      </div>
    </div>
    <div class="content-box">
      <databox :title="'仓库数据'" :dheight="350" :icon="'account'" :boxb="false">
        <div class="content-wapper"></div>
      </databox>
      <databox :title="'最近操作详情'" :dheight="220" :icon="'account'"></databox>
    </div>-->

    <div :style="{height:'800px',width:'100%'}" ref="myEchart"></div>
  </div>
</template>

<script>
import echarts from "echarts";
import 'echarts/extension/bmap/bmap'

export default {
  components: {},
  props: {},
  data() {
    return {};
  },
  mounted() {
    // this.initEchartMap()
    this.initmap();
  },
  methods: {
    initmap() {
      let myChart = echarts.init(this.$refs.myEchart);

      var option = {
        bmap: {
          center: [111.036857, 33.792961],
          zoom: 9,
          roam: true,
          mapStyle: {
            styleJson: [
              {
                featureType: "land", //调整土地颜色
                elementType: "geometry",
                stylers: {
                  color: "#081734"
                }
              },
              {
                featureType: "building", //调整建筑物颜色
                elementType: "geometry",
                stylers: {
                  color: "#04406F"
                }
              },
              {
                featureType: "building", //调整建筑物标签是否可视
                elementType: "labels",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "highway", //调整高速道路颜色
                elementType: "geometry",
                stylers: {
                  color: "#015B99"
                }
              },
              {
                featureType: "highway", //调整高速名字是否可视
                elementType: "labels",
                stylers: {
                  visibility: "on"
                }
              },
              {
                featureType: "arterial", //调整一些干道颜色
                elementType: "geometry",
                stylers: {
                  color: "#003051"
                }
              },
              {
                featureType: "arterial",
                elementType: "labels",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "green",
                elementType: "geometry",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "water",
                elementType: "geometry",
                stylers: {
                  color: "#044161"
                }
              },
              {
                featureType: "subway", //调整地铁颜色
                elementType: "geometry.stroke",
                stylers: {
                  color: "#003051"
                }
              },
              {
                featureType: "subway",
                elementType: "labels",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "railway",
                elementType: "geometry",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "railway",
                elementType: "labels",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "all", //调整所有的标签的边缘颜色
                elementType: "labels.text.stroke",
                stylers: {
                  color: "#313131"
                }
              },
              {
                featureType: "all", //调整所有标签的填充颜色
                elementType: "labels.text.fill",
                stylers: {
                  color: "#FFFFFF"
                }
              },
              {
                featureType: "manmade",
                elementType: "geometry",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "manmade",
                elementType: "labels",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "local",
                elementType: "geometry",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "local",
                elementType: "labels",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "subway",
                elementType: "geometry",
                stylers: {
                  lightness: -65
                }
              },
              {
                featureType: "railway",
                elementType: "all",
                stylers: {
                  lightness: -40
                }
              },
              {
                featureType: "boundary",
                elementType: "geometry",
                stylers: {
                  color: "#8b8787",
                  weight: "1",
                  lightness: -29
                }
              },
              {
                featureType: "boundary",
                elementType: "geometry",
                stylers: {
                  color: "#00ff00ff"
                }
              }
            ]
          }
        },
        series: [
          {
            type: "map",
            mapType: "china",
            coordinateSystem: "bmap"
          }
        ]
      };
      myChart.setOption(option);
    },

    initEchartMap() {}
  },
  watch: {
    username(username) {}
  }
};
</script>

<style lang="scss">
.anchorBL {
  display: none;
}

.content-cont {
  width: 100%;
  height: 100%;
  .top-box {
    display: flex;
    width: 100%;
    height: 110px;
    overflow: hidden;
    .left {
      width: 1/3 * 100%;
      background: rgba(35, 72, 135, 0.4);
    }
    .right {
      flex: 1;
      padding-left: 15px;
      .content {
        width: 100%;
        height: 100%;
        background: rgba(35, 72, 135, 0.4);

        .number-box {
          width: 50%;
          float: left;
        }
      }
    }
  }
  .content-box {
    padding-top: 30px;
  }
}
</style>